<template>
  <div>
    <Headers />
    <div class="content">
      <div class="left">
        <LeftUp class="left_up" />
        <!-- <LeftCenter class="left_center" /> -->
        <LeftDown class="left_down" />
      </div>
      <div class="center">

        <!-- <div ref="maps" class="maps"></div> -->
        <BlueZheRongmap :showSearch="false" @complete="complete"></BlueZheRongmap>
        <CenterUp></CenterUp>
      </div>
      <div class="right">
        <RightUp class="right_up" />
        <!-- <RightCenter class="right_center" /> -->
        <!-- <RightDown class="right_down" /> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import Headers from "../../components/Header.vue";
import {getProjectList}  from "@/api/projectApi"
import {getCompanyList} from "@/api/companyApi"
import LeftUp from "./component/LeftUp.vue";
import LeftCenter from "./component/LeftCenter.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";

import http from "@/api/http";
import { env } from "@/utils/env";
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import BlueZheRongmap from "@/components/blueZheRongmap.vue";
import markerRed from '@/assets/map/marker-red.png'
import breath_green from '@/assets/map/breath_green.png'
import CenterUp from "./component/centerUp.vue";
let index = -1
let map
let loca
const start = [116.99412, 25.080003]
const complete = async (e) => {
  map = e

  loca = new Loca.Container({
    map,
  });


  let list = [
    { lng: 119.293536, lat: 26.068826, name: '福州大数据园区' },
    { lng: 104.146893, lat: 30.581824, name: '成都市产业园区' },
    { lng: 116.028923, lat: 29.645642, name: '九江经济园区' },
  ]
  let res = await getProjectList({pageNum: 1, pageSize: 100})
  list = res.data.records

  // showByIndex()
  // setInterval(() => {
  //   showByIndex()
  // }, 3000)
  createMarket(list.concat({ lng: start[0], lat: start[1] }))
  createScatter(list.concat({ lng: start[0], lat: start[1] }))
  createLine(start, list)

  let gongList = [
    { lng: 121.474124, lat: 31.238741, name: '上海灿炜实业有限公司' },
    { lng: 113.134878, lat: 23.005294, name: '佛山市顺德区厚盈骏业五金丝网制造有限公司' },
    { lng: 117.172539 , lat: 39.079452, name: '天津展翅钢管有限公司' },
  ]
  res = await getCompanyList({pageNum: 1, pageSize: 100})
  gongList = res.data.records 
  
  createMarket(gongList)
  createScatter(gongList, 'red')
  
  for(let g of gongList){
    createLine([g.lng, g.lat], [{ lng: start[0], lat: start[1] }], 'red')
  }
}

const createMarket = (list) => {
  for (let item of list) {

    let icon = new AMap.Icon({
      size: new AMap.Size(25, 34), // 图标尺寸
      image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
      imageSize: new AMap.Size(25, 34),
    });


    // let marker = new AMap.Marker({
    //   icon: icon,
    //   position: [item.lng, item.lat],
    //   anchor: 'bottom-center',

    //   map
    // });

    new AMap.Text({
      text: `
      <div style="background: linear-gradient(to bottom, #054f63, #054f6311, #054f63); padding: 10px 10px;border-radius: 6px;
      text-align:left; color:#fff; font-size:12px;
 border: 1px solid #0670b4">
      <div>${item.name}</div>
      
      </div>
      `,
      visible: item.name != null,
      anchor: 'bottom-center',
      angle: 0,
      offset: new AMap.Pixel(0, -40),
      style: {
        border: 'none', background: 'none'
      },
      position: [item.lng, item.lat],
      zIndex: 100,
      map
    });


  }

  new AMap.Marker({

    position: start,
    anchor: 'bottom-center',
    visible: false,
    map
  })


  map.setFitView(null, false, [0, 0, 0, 0], 20)
}

const showByIndex = () => {
  let textList = map.getAllOverlays('text')
  for (let text of textList) {
    text.hide()
  }

  index++

  index = index % textList.length;

  textList[index].show()
}

const createScatter = (list, type) => {

  // 创建圆点图层
  var scatter = new Loca.ScatterLayer({
    loca,
    zIndex: 10,
    opacity: 0.6,
    visible: true,
    zooms: [2, 22],
  });
  // 创建数据源
  var pointGeo = new Loca.GeoJSONSource({
    // url: 'xxx.geojson', 或者使用 data 字段
    data: {
      "type": "FeatureCollection",
      "features": list.map(obj => {
        return {

          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "Point",
            "coordinates": [
              obj.lng,
              obj.lat
            ]

          }
        }
      })
    },
  });

  scatter.setSource(pointGeo);
  scatter.setStyle({
    unit: 'meter',
    size: [200000, 200000],
    borderWidth: 0,
    // texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
    texture:  type ? 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png' : breath_green,
    duration: 2000,
    animate: true,
  });
  loca.add(scatter);
  loca.animate.start();
}

const createLine = (startPos, list, type) => {
  
  // 弧线
  var pulseLink = new Loca.PulseLinkLayer({
    // loca,
    zIndex: 10,
    opacity: 1,
    visible: true,
    zooms: [2, 22],
    depth: true,
  });

  var geo = new Loca.GeoJSONSource({
    data: {
      "type": "FeatureCollection",
      "features": list.map(obj => {
        return {

          "type": "Feature",
          "properties": {
            "type": 0,
            "ratio": 0.0369,
            "lineWidthRatio": 1
          },
          "geometry": {
            "type": "LineString",
            "coordinates": [
              startPos,
              [
                obj.lng,
                obj.lat
              ]
            ]
          }
        }
      })
    }
  });

  pulseLink.setSource(geo);
  pulseLink.setStyle({
    unit: 'meter',
    dash: [100, 0, 100, 0],
    lineWidth: function () {
      return [10000, 10000];
    },
    height: function (index, feat) {
      return feat.distance / 3 + 10;
    },
    // altitude: 1000,
    smoothSteps: 30,
    speed: function (index, prop) {
      return 100000;
    },
    flowLength: 100000,
    lineColors: function (index, feat) {
      if(type){
        return ['rgb(255,28,10)', 'rgb(255,64,105)', 'rgba(255,228,105, 1)'];
      } else {
        return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
      }
      
    },
    maxHeightScale: 0.3, // 弧顶位置比例
    headColor: 'rgba(255, 255, 0, 1)',
    trailColor: 'rgba(255, 255,0,0)',
  });
  loca.add(pulseLink);
  loca.animate.start();
}



</script>
<style scoped lang="scss">
.maps {
  height: vh(720);
  //   width: vw(400);
  width: 100%;
}

.content {
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
}

.left {
  width: 27%;
}

.left_up {
  margin: vh(10) vw(10);
  height: vh(350);
}

.left_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_down {
  margin: vh(10) vw(10);
  height: vh(350);
}

.center {
  /* flex-grow: 1; */
  width: 46%;
  position: relative;
}

.right {
  width: 27%;
}

.right_up {
  margin: vh(10) vw(10);
  height: vh(720);
}

.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_down {
  margin: vh(10) vw(10);
  height: vh(350);
}
</style>